<template>
  <view class="profile-edit-page">
    <view class="header">
      <view class="back-btn" @click="goBack">
        <!-- <uni-icons type="left" size="24" color="#333"></uni-icons> -->
      </view>
      <!-- <view class="title">编辑个人资料</view> -->
      <view class="save-btn" @click="saveProfile">保存</view>
    </view>

    <view class="content">
      <!-- 头像编辑 -->
      <view class="avatar-section">
        <view class="avatar-container" @click="chooseImage">
          <image :src="avatar || '/static/user/beijing.png'" class="avatar" mode="aspectFill"></image>
          <view class="avatar-overlay">
            <uni-icons type="camera" size="20" color="#fff"></uni-icons>
          </view>
        </view>
        <view class="avatar-tip">点击更换头像</view>
      </view>

      <!-- 昵称编辑 -->
      <view class="form-section">
        <view class="form-item">
          <view class="label">昵称</view>
          <view class="input-container">
            <input 
              v-model="nickname"
              placeholder="请输入昵称"
              placeholder-style="color:#999"
              class="nickname-input"
              maxlength="10"
            />
          </view>
        </view>
      </view>

      <!-- 其他信息显示 -->
      <view class="info-section">
        <view class="info-item">
          <view class="label">ID</view>
          <view class="value">{{userId || '未设置'}}</view>
        </view>
        <view class="info-item">
          <view class="label">注册时间</view>
          <view class="value">{{registerTime || '未设置'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as index from '@/api/index.js'
  import { baseURL } from '@/common/config.js'
  
  export default {
    data() {
      return {
        nickname: '',
        avatar: '',
        userId: '',
        registerTime: '',
        userinfo: {}
      }
    },
    onLoad() {
      this.userinfo = uni.getStorageSync('userinfo') || {}
      this.loadUserInfo()
    },
    methods: {
      // 加载用户信息
      loadUserInfo() {
        // 从本地存储获取用户信息
        const userInfo = this.userinfo || {}
        
        // 从全局状态获取或API调用获取完整信息
        // 这里简单处理，实际项目中可能需要调用API
        this.nickname = userInfo.username || ''
        this.avatar = userInfo.avatar || ''
        this.userId = userInfo.userId || ''
        
        // 注册时间格式化处理
        if (userInfo.createTime) {
          const date = new Date(userInfo.createTime)
          this.registerTime = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
        }
      },
      
      // 选择图片 - 使用uniapp标准API（跨平台兼容）
      chooseImage() {
        // 使用uniapp的标准图片选择API，确保在所有平台都能正常工作
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            const tempFilePath = res.tempFilePaths[0]
            this.avatar = tempFilePath
            
            // 上传图片到服务器
            this.uploadAvatar(tempFilePath)
          },
          fail: (err) => {
            console.error('选择图片失败:', err)
            // 避免在用户取消选择时显示错误提示
            const errMsg = err.errMsg || ''
            if (!errMsg.includes('cancel')) {
              uni.showToast({
                title: '选择头像失败',
                icon: 'none'
              })
            }
          }
        })
      },
      
      // 上传头像
      uploadAvatar(filePath) {
        // 显示加载提示
        uni.showLoading({
          title: '上传中...'
        })
        
        // 微信小程序平台特殊处理
        // #ifdef MP-WEIXIN
        console.log('微信小程序上传头像:', filePath)
        uni.uploadFile({
          url: `${baseURL}/app/oss/upload`,
          filePath: filePath,
          name: 'file', // 微信小程序可能需要使用'file'作为参数名
          header: {
            'token': uni.getStorageSync('token') || '',
            // 微信小程序不要手动设置Content-Type，会自动处理
          },
          success: (uploadFileRes) => {
            uni.hideLoading()
            console.log('微信小程序上传结果:', uploadFileRes)
            
            try {
              const data = JSON.parse(uploadFileRes.data)
              console.log('微信小程序上传响应解析:', data)
              
              if (data.code === 0 || data.success) {
                // 上传成功，获取服务器返回的头像URL
                let avatarUrl = data.data || data.fileUrl || data.url || ''
                if (avatarUrl) {
                  // 为URL添加前缀（如果没有http/https前缀）
                  if (avatarUrl && !avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
                    // 假设图片服务器前缀是baseURL，或者使用具体的图片服务器地址
                    avatarUrl = `https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/${avatarUrl}`
                  }
                  this.avatar = avatarUrl
                  console.log('微信小程序头像上传成功，带前缀的地址:', avatarUrl)
                } else {
                  // 如果没有返回URL，使用本地路径
                  console.log('微信小程序头像上传成功，使用本地路径:', filePath)
                }
              } else {
                console.error('微信小程序上传失败:', data.msg || '未知错误')
                uni.showToast({
                  title: data.msg || '上传失败',
                  icon: 'none'
                })
              }
            } catch (e) {
              console.error('微信小程序解析上传响应失败:', e, uploadFileRes.data)
              uni.showToast({
                title: '上传成功但解析返回数据失败',
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            uni.hideLoading()
            console.error('微信小程序头像上传失败:', JSON.stringify(err))
            uni.showToast({
              title: '上传失败，请重试',
              icon: 'none'
            })
          }
        })
        // #endif
        
        // 非微信小程序平台
        // #ifndef MP-WEIXIN
        console.log('非微信平台上传头像:', filePath)
        uni.uploadFile({
          url: `${baseURL}/app/oss/upload`,
          filePath: filePath,
          name: 'avatar',
          header: {
            'token': uni.getStorageSync('token') || '',
            'Content-Type': 'multipart/form-data'
          },
          success: (uploadFileRes) => {
            uni.hideLoading()
            
            try {
              const data = JSON.parse(uploadFileRes.data)
              
              if (data.code === 0 || data.success) {
                // 上传成功，获取服务器返回的头像URL
                let avatarUrl = data.data || data.fileUrl || data.url || ''
                if (avatarUrl) {
                  // 为URL添加前缀（如果没有http/https前缀）
                  if (avatarUrl && !avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
                    // 假设图片服务器前缀是baseURL，或者使用具体的图片服务器地址
                    avatarUrl = `${baseURL}/${avatarUrl}`
                  }
                  this.avatar = avatarUrl
                  console.log('头像上传成功，带前缀的地址:', avatarUrl)
                } else {
                  // 如果没有返回URL，使用本地路径
                  console.log('头像上传成功，使用本地路径:', filePath)
                }
              } else {
                uni.showToast({
                  title: data.msg || '上传失败',
                  icon: 'none'
                })
              }
            } catch (e) {
              console.error('解析上传响应失败:', e)
              uni.showToast({
                title: '上传成功但解析返回数据失败',
                icon: 'none'
              })
            }
          },
          fail: (err) => {
            uni.hideLoading()
            console.error('头像上传失败:', err)
            uni.showToast({
              title: '上传失败，请重试',
              icon: 'none'
            })
          }
        })
        // #endif
      },
      
      // 保存个人资料
      saveProfile() {
        if (!this.nickname.trim()) {
          uni.showToast({
            title: '昵称不能为空',
            icon: 'none'
          })
          return
        }
        
        if (this.nickname.length > 10) {
          uni.showToast({
            title: '昵称不能超过10个字符',
            icon: 'none'
          })
          return
        }
        
        // 显示加载提示
        uni.showLoading({
          title: '保存中...'
        })
        
        // 调用API更新用户信息
        // 使用与项目中一致的API调用方式
        index.userUpdate({
          userId: this.userId,
          username: this.nickname,
          tx: this.avatar
        }).then(res => {
          uni.hideLoading()
          
          console.log('保存用户信息结果:', res)
          
          // 检查保存是否成功
          if (res.success || res.code === 0) {
            // 更新本地存储的用户信息
            const updatedUserInfo = {
              ...this.userinfo,
              username: this.nickname,
              tx: this.avatar
            }
            uni.setStorageSync('userinfo', updatedUserInfo)
            
            // 提示保存成功
            uni.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 1500,
              success: () => {
                // 延迟返回上一页
                setTimeout(() => {
                  this.goBack()
                }, 1500)
              }
            })
          } else {
            // 保存失败
            uni.showToast({
              title: res.message || res.msg || '保存失败',
              icon: 'none'
            })
          }
        }).catch(error => {
          uni.hideLoading()
          console.error('保存失败:', error)
          uni.showToast({
            title: '保存失败，请重试',
            icon: 'none'
          })
        })
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .profile-edit-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      padding: 0 30rpx;
      background-color: #fff;
      border-bottom: 1rpx solid #e8e8e8;
      
      .back-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
      
      .save-btn {
        font-size: 28rpx;
        color: #197BE6;
      }
    }
    
    .content {
      padding: 40rpx 30rpx;
    }
    
    // 头像部分
    .avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 50rpx;
      
      .avatar-container {
        position: relative;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 16rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        
        &:active {
          transform: scale(0.95);
        }
        
        .avatar {
          width: 100%;
          height: 100%;
        }
        
        .avatar-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 50rpx;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
      .avatar-tip {
        font-size: 24rpx;
        color: #666;
      }
    }
    
    // 表单部分
    .form-section {
      background-color: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      
      .form-item {
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        height: 98rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        .label {
          font-size: 28rpx;
          color: #333;
          width: 120rpx;
        }
        
        .input-container {
          flex: 1;
          
          .nickname-input {
            font-size: 28rpx;
            color: #333;
            background: none;
            border: none;
            outline: none;
          }
          
          .placeholder {
            color: #999;
          }
        }
      }
    }
    
    // 信息展示部分
    .info-section {
      background-color: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      
      .info-item {
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        height: 98rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          font-size: 28rpx;
          color: #333;
          width: 120rpx;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: #999;
          text-align: right;
        }
      }
    }
  }
</style>